<style lang="less" scoped>
    .main {
        background: #fff;
        border-top: 1px solid #ebebeb;
        .item {
            height: 1rem;
            padding: 0 0.3rem 0 0.3rem;
            border-top: 1px solid #ebebeb;
            font-size: 0.28rem;
            color: #ABABAB;
            .title {
                font-size: 0.32rem;
                color: #272727;

            }


        }
        .item:first-child {
            border-top: 0;
        }
    }
    .avatar {
        width: 1.17rem;
        height: 1.17rem;
        border-radius: 50%;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
        }

    }
    button {
        width: 100%;
        font-size: 0.36rem;
        color: #fff;
        padding: 0.35rem 0 0.35rem;
        margin-top: 0.5rem;
    }
    .refresh_wx{
        width: 100%;
        /*position: absolute;*/
        /*left: 0;*/
        /*bottom: 0.26rem;*/
        margin: 1rem 0 0.2rem;
        div{
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            color: #666;
            font-size: 0.3rem;
        }

    }
</style>
<template>
    <div>
            <v-header>
                <div slot="left" style="width:100%;height:100%;padding-top: 0.2rem;" @click.stop="back"><span class="backs_icon" style="display: block"></span></div>            </v-header>
        <div class="main_allScroll">
            <div class="main">
                <div class="item" v-show="!comJS.checkIsNewEdition()" style="height: 1.68rem">
                    <div class="title">头像</div>
                    <div class="avatar">
                        <img :src="headerImg" :alt="title"/>
                    </div>
                </div>
                <div class="item" v-show="comJS.checkIsNewEdition()" @click="modifyHeaderImg" style="height: 1.68rem">
                    <div class="title">头像</div>
                    <div class="avatar">
                        <img :src="headerImg" :alt="title"/>
                    </div>
                </div>
                <div @click="$router.push({path: '/modify/modify_name'})" class="item">
                    <div class="title">昵称</div>
                    <div >{{user.nickname && user.nickname !== null?user.nickname:user.nameHide?user.nameHide:user.mobileNo}}</div>
                </div>
                <div class="item">
                    <div class="title">手机号</div>
                    <div>{{user.mobileNo !== null?user.mobileNo:''}}</div>
                </div>
                <div class="item">
                    <div class="title">性别</div>
                    <div v-if="user.gender==1">男</div>
                    <div v-else-if="user.gender==2">女</div>
                    <div v-else></div>
                </div>
                <div class="item">
                    <div class="title">出生日期</div>
                    <div>{{user.birthday}}</div>
                </div>
                <div class="item" v-show="user.inviteStatus == '1'">
                    <div class="title">邀请人</div>
                    <div>{{user.inviteName}}</div>
                </div>
                <div class="item" v-show="comJS.checkIsNewEdition()" type="button" v-on:click="Interactive.copyToClipboard(user.inviteCode.trim())">
                    <div class="title">我的邀请码<span style="font-size: 0.24rem;">(点击可复制)</span></div>
                    <div>{{user.inviteCode}}</div>
                </div>
                <div class="item" v-show="!comJS.checkIsNewEdition()" type="button" v-clipboard:copy="user.inviteCode"
                     v-clipboard:success="onCopy"
                     v-clipboard:error="onError">
                    <div class="title">我的邀请码<span style="font-size: 0.24rem;">(点击可复制)</span></div>
                    <div>{{user.inviteCode}}</div>
                </div>
            </div>
            <div class="main" style="border-top: 0;margin-top: 0.16rem">
                <div v-show="user.inviteStatus != '1'" class="item" v-on:click="gotoPage('/my/refree')">
                    <div class="title">填写推荐人</div>
                    <div class="right_icon"></div>
                </div>
                <div class="item" v-on:click="showQrCodeDetails">
                    <div class="title">推广二维码</div>
                    <div class="right_icon"></div>
                </div>
                <div class="item" v-on:click="gotoPage('/my/address')">
                    <div class="title">收货地址</div>
                    <div class="right_icon"></div>
                </div>
                <div class="item"  v-on:click="user.payPassword == '0' ? gotoPage('/my/pay_pw'): gotoPage('/my/before_changePw')">  <!--v-show="user.payPassword != '1' "-->
                    <div class="title">{{user.payPassword == '1' ? '修改': '设置'}}支付密码</div>
                    <div class="right_icon"></div>
                </div>
                <div class="item"  v-on:click="gotoPage('/my/pw')">
                    <div class="title">{{user.password == '1' ? '修改': '设置'}}登录密码</div>
                    <div class="right_icon"></div>
                </div>
                <div class="item" v-on:click="gotoPage('/my/bankCard',1)">
                    <div class="title">我的银行卡</div>
                    <div class="right_icon"></div>
                </div>
                <div class="item" v-on:click="gotoPage('/modify/old_pw', 1);GIVEUP_MODIFY();MODIFY_USER({type: '1'})">
                    <div class="title">更换手机号</div>
                    <div class="right_icon"></div>
                </div>
             <!--   <div class="item" v-show="user.payPassword == '1' " v-on:click="gotoPage('/modify/old_phone',1);GIVEUP_MODIFY();MODIFY_USER({type: '3'})">
                    <div class="title">忘记支付密码</div>
                    <div class="right_icon"></div>
                </div>-->
                <div class="item" v-on:click="gotoPage('/modify/old_verified',1);GIVEUP_MODIFY();MODIFY_USER({type: '4'})">
                    <div class="title">修改实名信息</div>
                    <div class="right_icon"></div>
                </div>
                <div class="item" v-on:click="Interactive.makePhoneCall({tel: '400-655-5858'})">
                    <div class="title">铺连铺官方电话</div>
                    <div><span style="margin-right: .1rem;font-size: .24rem;line-height: .36rem">400-655-5858</span><div class="right_icon" style="margin-bottom: -.04rem"></div></div>
                </div>
                <!--<div class="item" v-on:click="gotoSettin">
                    <div class="title">设置</div>
                    <div class="right_icon"></div>
                </div>-->
            </div>
            <div class="refresh_wx">
                <div v-on:click="refresh_wx">
                    <span class="refresh" style="margin-right: 0.1rem"></span>
                    <span>同步微信资料</span>
                </div>
            </div>
        </div>

    </div>
</template>
<script>

    import {mapActions,mapState} from 'vuex'
    import {USER_ASSIGN, USER_SIGNIN} from 'store/user'
    import {UPDATA_INTERACTIVE} from 'store/interactive'
    import { MODIFY_USER, GIVEUP_MODIFY } from 'store/modifyUser'
    export default {
        data() {
            return {
                loadingImg: require("../../assets/img/avatar.png"),
                errorImg: require("../../assets/img/avatar.png"),
                headerImg:require("../../assets/img/avatar.png"),
                recordDate: '',
                user: {}
            };
        },
        activated(){
            /*if(this.user.inviteStatus == "1" && !this.user.inviteName || this.user.inviteName == null){
                this.comJS.getUserInfo()
            }*/
            // this.comJS.getUserInfo()
            this.init()
            // alert(JSON.stringify(this.user));
        },
        mounted(){
        },
        methods:{
            ...mapActions([USER_ASSIGN,UPDATA_INTERACTIVE, MODIFY_USER, GIVEUP_MODIFY, USER_SIGNIN]),
            init(){
                this.user = {
                    mobileNo:'',
                    inviteName: '',
                    gender: 0,
                    birthday: '',
                    inviteCode: '',
                    inviteStatus: '',
                    payPassword: '',
                    nickname:'',
                    nameHide:'',
                }
                this.headerImg = require("../../assets/img/avatar.png")
                if(this.comJS.getCookie('t')){
                    this.gerInFo()
                }
            },
          back(){
            if (this.comJS.checkFormShare()) {
              this.Interactive.activityWebDismiss();
            } else {
              this.$router.isBack=true;
              this.$router.push('/my')
            }
          },
            //获取个人信息
            gerInFo(callback) {
                this.$ajax.inFo.queryIdentityInfo()
                    .then((res) => {
                        this.user = res.body.content
                        this.USER_SIGNIN(res.body.content)
                        if (res.body.content.nickname) {
                            this.name = res.body.content.nickname
                        } else {
                            this.name = res.body.content.nameHide && res.body.content.nameHide != null ? res.body.content.nameHide : res.body.content.mobileNo
                        }
                        if (res.body.content.headImgUrl && res.body.content.headImgUrl != null) {
                            this.headerImg = res.body.content.headImgUrl
                        } else {
                            this.headerImg = this.loadingImg
                        }
                    })
            },
            modifyHeaderImg(){  //修改头像
                window.localStorage.setItem('uploadPicturesType','20')
                this.Interactive.uploadPictures(20,'YES');
            },
            pushImgSucc(str){
                this.$ajax.inFo.modifyHeadPortraitOrNickName({
                    headImgUrl:str.imageUrl,
                    nickName:'',
                    type:1// 1头像  0昵称
                }).then((res)=>{
                    this.$vux.toast.text('修改成功','middle');
                    window.localStorage.removeItem('uploadPicturesType');
                    this.gerInFo()
                })
            },

            gotoOut(){
                localStorage.clear();
                this.UPDATA_INTERACTIVE({type: 'refreshMyPage', content: {type:true,flag:'out'}})
            },
            refresh_wx(){
                this.Interactive.weChatAuth();

            },
            pushInfo(data){
                alert(JSON.stringify(data));
                let obj = {
                    openId:data.openid,
                    uid:data.uid,
                    nickname:data.name,
                    headImgUrl:data.iconurl,
                    country:data.country,
                    province:data.province,
                    city:data.city,
                    sex:data.unionGender == "男"?1:data.unionGender == "女"?2:null,
                    gender:data.unionGender == "男"?1:data.unionGender == "女"?2:null,
                };
                this.$ajax.inFo.weChat(obj)
                    .then((res)=>{
                        this.headerImg = obj.headImgUrl;
                        this.$vux.toast.text('微信同步成功', 'middle')
                        this.USER_ASSIGN(obj);
                    })
            },
            gotoPage(url, type) {
                if(!this.comJS.getCookie('t')){
                    this.Interactive.pushTokentoJS();
                }else if (type && this.user.authentication != "1") {
                    let that = this;
                    this.$vux.confirm.show({
                        title: '操作提示',
                        content: '您还未进行实名认证，是否前去认证？',
                        onConfirm() {
                            that.$router.push({path: '/my/verified'});
                        }
                    })
                } else {
                    this.$router.push({
                        path: url,
                    })
                }
            },
            gotoSettin(){
                this.Interactive.userSettingClick();
            },
            recordTime(){
                this.recordDate = new Date()
            },
            onCopy(){
                this.$vux.toast.text('复制成功', 'middle')
                /*let that = this
                var a = new Date()
                console.log(a - this.recordDate)
                if(a - this.recordDate < 2000){
                    return
                } else {
                    this.$copyText(that.user.inviteCode).then(function (e) {
                        that.$vux.toast.text('复制成功', 'middle')
                    }, function (e) {
                        that.$vux.toast.text('复制失败', 'middle')
                        console.log(e)
                    })
                }*/
            },
            onError(){
                this.$vux.toast.text('复制失败', 'middle')
            },
            showQrCodeDetails(){
                this.Interactive.showQrCodeDetails({title: '推广二维码',text: '注册领红包，购物享折扣',merchantName: this.name, rqCode: this.user.qrCodeImg, mainImg: this.headerImg, detailAddress: this.user.inviteCode})
            }
        },
        watch:{
            'interactive.wx_info':function () {
                if(this.interactive.wx_info || interactive.wx_info != {}){
                    this.pushInfo(this.interactive.wx_info);
                }
            },
            'interactive.refreshMyPage':function () {
                if(this.interactive.refreshMyPage.type && this.interactive.refreshMyPage.flag == 'ok'){
                    this.init();
                }else if(this.interactive.refreshMyPage.type && this.interactive.refreshMyPage.flag == 'out'){
                    this.init();
                }
            },
            "interactive.image":function () {
                if(this.interactive.image.url && window.localStorage.getItem('uploadPicturesType') == '20'){
                    this.pushImgSucc(this.interactive.image.url);
                };
            }
        },
      computed: mapState({interactive: state => state.interactive,pageUrl:state=>state.router}),
    }
</script>